import React, { useEffect, useState, useMemo } from 'react'
import { useLocation, useParams } from 'umi';
import { Button, Modal, Tooltip, Table } from 'antd';
import './gg.less'
import useARH from '@minko-fe/use-antd-resizable-header';
import '@minko-fe/use-antd-resizable-header/dist/style.css';
// 组件
export default function Xq(props) {
    const location = useLocation();
    const params = useParams();
    let [title, settitle] = useState('')
    let [time, settime] = useState('')
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    useEffect(() => {
        let y = props.history.location.state
        settitle(y.t)
        settime(y.d)
    }, [])
    // 表格
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: "id",
            width: 100,
        },
        {
            title: '用户',
            dataIndex: 'user',
            key: "user",
            width: 100,

        },
        {
            title: '操作',
            dataIndex: 'do',
            key: "do",
            width: 100,

        },
        {
            title: '文件',
            dataIndex: 'flie',
            key: "flie",
            width: 200,

        },
        {
            title: '时间',
            dataIndex: 'time',
            key: "time",
        },
    ];
    const data = [
        {
            key: '1',
            id: 1,
            user: '张妍',
            flie: '关于2020年放假的通知',
            time: '2022-8-13',
            do: '浏览'
        },
        {
            key: '2',
            id: 2,
            user: '张妍',
            flie: '关于2020年放假的通知',
            time: '2022-8-13',
            do: '浏览'
        },
        {
            key: '3',
            id: 3,
            user: '张妍',
            flie: '关于2020年放假的通知',
            time: '2022-8-13',
            do: '浏览'
        }
    ];
    const { components, resizableColumns, tableWidth, resetColumns } = useARH({
        columns: useMemo(() => columns, []),
        // 保存拖拽宽度至本地localStorage
        columnsState: {
            persistenceKey: 'localKey',
            persistenceType: 'localStorage',
        },
    });

    // 渲染
    return (
        <div className="xqbox">
            <Modal footer={null} title="查看日志" open={isModalOpen} onOk={handleOk} width={666} onCancel={handleCancel}>
                <Table columns={resizableColumns}
                    components={components} dataSource={data}
                    scroll={{ x: tableWidth }}></Table>
                <Button onClick={() => resetColumns()}>重置宽度</Button>
            </Modal>
            <div className="top">
                <div onClick={showModal}>查看日志</div>
            </div>
            <div className="mmbox">
                <div className="main">
                    <h1 style={{ margin: '20px' }}>{title}</h1>
                    <h5 style={{ color: 'rgb(153, 151, 151)', fontWeight: '400' }}>发布时间:{time}</h5>
                    <div className="mbox">
                        来源：总部编辑：中国xxxx北京消息（王涛）8月18日，由中华全国工商业联合会评选的“2014中国民营企业500强”榜单揭晓，xxxx位列榜单第28位。<br /><br />
                        “中国民营企业500强”是中华全国工商业联合会在上规模民营企业调研的基础上，以营业收入总额为参考指标发布的排序结果。<br /><br />
                        上规模民营企业调研作为全国工商联的重点工作，自1998年以来已连续开展了13年。中国xxxx集团旗下的..和，，已经连续多年入选“中国民营企业500强”。<br /><br />
                        <img src="https://erpdemo.fanpusoft.com/UpLoader/editor/2021-04-28/93d7ec63-082b-4ec8-b33e-36a526bd5449.jpg" style={{ margin: '5px 0' }} alt="" /><br />
                        今年，中国xxxx集团以2013全年营业收入总额1，88，209万元，入选“2014中国民营企业500强”榜单，成为中国xxxx集团走上集团化发展道路的重要标志之一。<br /><br />
                        中国xxxx集团始终秉持“绿色、可持续”的发展理念，依托资源优势，坚持以“煤基清洁能源”为主线，大力发展煤基多联产循环经济。集团已经在内蒙古、<br /><br />
                        青海、宁夏和新疆等地先后建成了多个以现代煤化工为标志的低碳化、清洁化、循环型国家级产业园区，成功运营了一大批煤基清洁能源项目。<br /><br />
                        “打造国际一流清洁能源企业”是中国xxxx可持续发展的主旨和不懈追求。作为全球领先、中国第一家投入商业化运营的煤制气企业，<br /><br />
                        中国xxxx将继续加大在清洁能源领域的投资和科技研发力度，遵循“绿色、安全、高效”的发展模式，构建全新的清洁能源全产业链条，努力成为中国清洁能源领域的领跑者！<br /><br />
                    </div>
                    <div className="r">
                        <p>XXXX公司行政部</p>
                        <br />
                        <p>2018年x月x日</p>
                    </div>
                </div>
            </div>
        </div>
    )
}
